<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>新增来料检验</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="cancel">返回</el-button>
      </div>

      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="物料编码" prop="materialCode">
          <el-input v-model="form.materialCode" placeholder="请输入物料编码" />
        </el-form-item>

        <el-form-item label="物料名称" prop="materialName">
          <el-input v-model="form.materialName" placeholder="请输入物料名称" />
        </el-form-item>

        <el-form-item label="检验批次" prop="batchNo">
          <el-input v-model="form.batchNo" placeholder="请输入检验批次" />
        </el-form-item>

        <el-form-item label="检验数量" prop="quantity">
          <el-input-number v-model="form.quantity" :min="1" :max="10000" />
        </el-form-item>

        <el-form-item label="检验方案" prop="schemeId">
          <el-select v-model="form.schemeId" placeholder="请选择检验方案">
            <el-option
              v-for="item in schemeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="检验项目" prop="items">
          <el-table :data="form.items" border style="width: 100%">
            <el-table-column prop="itemName" label="检验项目" width="180" />
            <el-table-column prop="standard" label="检验标准" width="180" />
            <el-table-column label="检验结果">
              <template slot-scope="scope">
                <el-select v-model="scope.row.result" placeholder="请选择检验结果">
                  <el-option label="合格" value="1" />
                  <el-option label="不合格" value="0" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="备注">
              <template slot-scope="scope">
                <el-input v-model="scope.row.remark" placeholder="请输入备注" />
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item label="检验结论" prop="conclusion">
          <el-radio-group v-model="form.conclusion">
            <el-radio label="1">合格</el-radio>
            <el-radio label="0">不合格</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="检验备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" rows="3" placeholder="请输入检验备注" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AddIncomingInspection',
  data() {
    return {
      // 表单参数
      form: {
        materialCode: '',
        materialName: '',
        batchNo: '',
        quantity: 1,
        schemeId: '',
        items: [
          {
            itemName: '尺寸检测',
            standard: '长度误差±0.5mm',
            result: '',
            remark: ''
          },
          {
            itemName: '外观检测',
            standard: '无明显划痕、变形',
            result: '',
            remark: ''
          }
        ],
        conclusion: '',
        remark: ''
      },
      // 检验方案选项
      schemeOptions: [
        { id: '1', name: '原材料检验方案' },
        { id: '2', name: '半成品检验方案' },
        { id: '3', name: '成品检验方案' }
      ],
      // 表单校验
      rules: {
        materialCode: [
          { required: true, message: '物料编码不能为空', trigger: 'blur' }
        ],
        materialName: [
          { required: true, message: '物料名称不能为空', trigger: 'blur' }
        ],
        batchNo: [
          { required: true, message: '检验批次不能为空', trigger: 'blur' }
        ],
        quantity: [
          { required: true, message: '检验数量不能为空', trigger: 'blur' }
        ],
        schemeId: [
          { required: true, message: '请选择检验方案', trigger: 'change' }
        ],
        conclusion: [
          { required: true, message: '请选择检验结论', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 实际应调用后端API
          this.$modal.msgSuccess("新增成功");
          this.cancel();
        }
      });
    },
    /** 取消按钮 */
    cancel() {
      this.$router.push({ path: "/sb/IncomingInspection" });
    }
  }
}
</script> 